<template>
  <el-col class="col">
    <el-menu router :default-active="this.$router.path" id="nav" class="el-menu-vertical-demo" @open="handleOpen" close="handleClose">
      <li class="slide1"></li>
      <li class="slide2"></li>
      <el-menu-item index="/forestage/bobo"><i class="fa-duotone fa-snowman fa-lg"/><span slot="title">啵啵</span></el-menu-item>
      <el-menu-item index="/forestage/shopping"><i class="fa-duotone fa-cart-shopping-fast fa-lg"/><span slot="title">好物</span></el-menu-item>
      <el-menu-item index="/forestage/publish"><i class="fa-duotone fa-plus fa-lg"/><span slot="title">发布</span></el-menu-item>
      <el-menu-item index="/forestage/chat"><i class="fa-duotone fa-messages fa-lg"/><span slot="title">消息</span></el-menu-item>
<!--      <el-menu-item index="/forestage/me"><i class="fa-duotone fa-user fa-lg"/><span slot="title">我的</span></el-menu-item>-->
      <el-menu-item @click="My()"><i class="fa-duotone fa-user fa-lg"/><span slot="title">我的</span></el-menu-item>
      <li style="flex:1;"></li>
      <el-dropdown>
        <el-menu-item id="options"><i class="fa-duotone fa-gear"/><span slot="title">选项</span></el-menu-item>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="join()" icon="el-icon-plus">商家入住</el-dropdown-item>
          <el-dropdown-item @click.native="join()" icon="el-icon-circle-plus">狮子头</el-dropdown-item>
          <el-dropdown-item command="a" icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
          <el-dropdown-item command="a" icon="el-icon-check">黄金糕</el-dropdown-item>
          <el-dropdown-item command="a" icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu>
  </el-col>
</template>

<script>
export default {
  name: "fAside",
  mounted() {
    this.slide();
  },
  data() {
    return {
      isCollapse: true
      
    };
  },
  methods: {
    My(){

    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    slide() {
      let nav = document.getElementById("nav");
      let slide1 = document.querySelector("#nav .slide1");
      let slide2 = document.querySelector("#nav .slide2");

      // Get all anchor tags inside #nav
      let links = document.querySelectorAll("#nav span");

      // Loop through each anchor tag
      links.forEach(function (link) {
        // Click event listener
        link.addEventListener("click", function () {
          // Get the position and width of the parent li element
          let position = this.parentNode.getBoundingClientRect();
          let width = position.width;
          let height = position.height;
          let topOffset = position.top - nav.getBoundingClientRect().top;

          // Set styles for slide1
          slide1.style.opacity = 1;
          slide1.style.top = topOffset + "px";
          slide1.style.width = width + "px";
          slide1.style.height = height + "px";
        });

        // Mouseover event listener
        link.addEventListener("mouseover", function () {
          // Get the position and width of the parent li element
          let position = this.parentNode.getBoundingClientRect();
          let width = position.width;
          let height = position.height;
          let topOffset = position.top - nav.getBoundingClientRect().top;

          // Set styles for slide2
          slide2.style.opacity = 1;
          slide2.style.top = topOffset + "px";
          slide2.style.width = width + "px";
          slide2.style.height = height + "px";
          slide2.classList.add("squeeze"); // Add squeeze class
        });

        // Mouseout event listener
        link.addEventListener("mouseout", function () {
          // Hide slide2
          slide2.style.opacity = 0;
          slide2.classList.remove("squeeze"); // Remove squeeze class
        });
      });
    },
    handleCommand(command) {
      this.$message('click on item ' + command);
    },
    join() {
      window.open('/sellerRegister', '_blank');
    }
  }
}
</script>

<style scoped lang="scss">

.col{
  height: 100%;
}

#nav {
  position: relative;
  border: none;
  border-radius: 2em;
  display: flex;
  flex-direction: column;
  list-style: none;
  //background: #f5f5f5;
  padding: 10px;
  height: 90%;

}

#nav li span {
  position: relative;
  padding: 0 50px;
  font-size: 16px;
  border: none;
  outline: none;
  color: rgb(70, 100, 180);
  display: inline-block;
  text-decoration: none;
  z-index: 3;
}

.slide1, .slide2 {
  position: absolute;
  display: inline-block;
  height: 60px !important;
  border-radius: 10em;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
}

.slide1 {
  background-color: rgb(170, 190, 255);
  z-index: 2;
}

.slide2 {
  opacity: 0;
  background-color: rgba(170, 190, 255, .5);
  z-index: 1;
  box-shadow: 0 0 20px #ffffffaa inset;
}

.squeeze {
  transform: scale(0.9);
}

.el-menu-item:hover, .el-menu-item:focus {
  outline: none;
  background: none;
}
.el-menu-item i{
  position: relative;
  z-index: 3;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
</style>
